<template>
  <div id="userLayout">
    <div class="container">
      <div class="title" @click="toHome">
        <img src="@/assets/logo.png" />
        社会组织评估申报平台
      </div>
      <div class="main">
        <div class="form_box">
          <div class="form_left">
            <img src="@/assets/login-people.png" />
          </div>
          <div class="form_right">
            <div v-show="login">
              <div class="login_text">用户登录 / <span>USER LOGIN</span></div>
              <a-form-model
                ref="loginForm"
                :model="loginForm"
                :rules="loginRules"
                class="login"
              >
                <a-form-model-item prop="phone">
                  <a-input
                    v-model="loginForm.phone"
                    placeholder="请输入手机号"
                    :max-length="11"
                  >
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                </a-form-model-item>
                <a-form-model-item prop="code">
                  <!-- <a-input
                    v-model="loginForm.password"
                    type="password"
                    placeholder="请输入登录密码"
                  >
                    <a-icon slot="prefix" type="lock" />
                  </a-input> -->
                  <a-input-search
                    placeholder="请输入验证码"
                    class="code_input"
                    v-model="loginForm.code"
                    :max-length="6"
                    @search="getCode(1)"
                  >
                    <a-icon slot="prefix" type="lock" />
                    <a-button
                      slot="enterButton"
                      type="primary"
                      class="get_code"
                      :disabled="codeStatus1"
                    >
                      {{ count1 ? `${count1}s` : "获取验证码" }}
                    </a-button>
                  </a-input-search>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button type="primary" block @click="loginRequest">
                    登录
                  </a-button>
                </a-form-model-item>
              </a-form-model>
              <div class="to_register" @click="change(false)">
                没有账号？去注册
              </div>
            </div>
            <div v-show="!login">
              <div class="register_text">用户注册</div>
              <a-form-model
                ref="registerForm"
                :model="registerForm"
                :rules="registerRules"
                class="register"
              >
                <a-form-model-item prop="userName">
                  <a-input
                    v-model="registerForm.userName"
                    placeholder="请输入注册组织名称"
                  >
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                </a-form-model-item>
                <a-form-model-item prop="phonenumber">
                  <a-input
                    v-model="registerForm.phonenumber"
                    placeholder="请输入手机号码"
                    :max-length="11"
                  >
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                </a-form-model-item>
                <a-form-model-item prop="code">
                  <!-- <a-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请输入登录密码"
                  >
                    <a-icon slot="prefix" type="lock" />
                  </a-input> -->
                  <a-input-search
                    placeholder="请输入验证码"
                    class="code_input"
                    v-model="registerForm.code"
                    @search="getCode(2)"
                  >
                    <a-icon slot="prefix" type="lock" />
                    <a-button
                      slot="enterButton"
                      type="primary"
                      class="get_code"
                      :disabled="codeStatus2"
                    >
                      {{ count2 ? `${count2}s` : "获取验证码" }}
                    </a-button>
                  </a-input-search>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button type="primary" block @click="registerRequest"
                    >注册</a-button
                  >
                </a-form-model-item>
              </a-form-model>
              <div class="to_login" @click="change(true)">有账号？去登录</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  register,
  login,
  getInfo,
  getVerificationCode,
  phoneLogin,
} from "@/api/login";
const RegPhone = /^1[3456789]\d{9}$/;
export default {
  name: "loginPage",
  data() {
    const validateLoginPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!RegPhone.test(this.loginForm.phone)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!RegPhone.test(this.registerForm.phonenumber)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      login: true,
      loginForm: {
        phone: "",
        code: "",
      },
      loginRules: {
        phone: [{ validator: validateLoginPhone, trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      registerForm: {
        userName: "", // 注册组织名称
        phonenumber: "", // 手机号
        // password: "", // 密码
        code: "",
      },
      registerRules: {
        userName: [
          { required: true, message: "请输入社会组织名称", trigger: "blur" },
        ],
        phonenumber: [{ validator: validatePhone, trigger: "blur" }],
        // password: [
        //   { required: true, message: "请输入登录密码", trigger: "blur" },
        // ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      // 登录
      codeStatus1: false,
      timer1: null,
      count1: "",
      // 注册
      codeStatus2: false,
      timer2: null,
      count2: "",
    };
  },
  methods: {
    change(e) {
      this.login = e;
      // this.codeStatus = false;
      // this.timer = null;
      // this.count = "";
    },
    registerRequest() {
      const _ts = this;
      _ts.$refs.registerForm.validate((valid) => {
        if (valid) {
          register({
            ..._ts.registerForm,
            nickName: _ts.registerForm.userName,
          }).then(() => {
            _ts.$message.success({
              content: "注册成功",
              duration: 1.5,
            });
            setTimeout(() => {
              _ts.change(true);
              _ts.$refs.registerForm.resetFields();
            }, 1200);
          });
        }
      });
    },
    loginRequest() {
      const _ts = this;
      _ts.$refs.loginForm.validate((valid) => {
        if (valid) {
          // login(_ts.loginForm).then((res) => {
          //   _ts.getUserInfo();
          //   _ts.$storejs.set("token", res.data.token);
          //   _ts.$message.success({
          //     content: "登录成功",
          //     duration: 1.2,
          //   });
          //   setTimeout(() => {
          //     _ts.$router.push("/home");
          //   }, 1200);
          // });
          phoneLogin(_ts.loginForm).then((res) => {
            // 判断是申报端还是管理端登录
            let loginType = res.data.loginType || 'DECLARATION_PC'
            if (loginType == 'MANAGEMENT_PC') {
              // 管理端 设置token 跳转申报端
              localStorage.setItem('Authorization', res.data.token)
              window.location = '/grade-evaluation-management/'
            } else {
              // 申报端
              _ts.$storejs.set("token", res.data.token);
              _ts.getUserInfo();
              _ts.$message.success({
                content: "登录成功",
                duration: 1.2,
              });
              setTimeout(() => {
                _ts.$router.push("/home");
              }, 1200);
            }
          });
        }
      });
    },
    toHome() {
      this.$router.push("/home");
    },
    getUserInfo() {
      getInfo({}).then((res) => {
        this.$storejs.set("userInfo", res.data);
      });
    },
    getCode(type) {
      const TIME_COUNT = 60;
      if (type === 1) {
        let phone = this.loginForm.phone;
        if (!phone || !RegPhone.test(phone)) {
          this.$message.error("手机号格式不正确");
          return false;
        }
        if (!this.timer1) {
          this.count1 = TIME_COUNT;
          this.codeStatus1 = true;
          this.timer1 = setInterval(() => {
            this.count1--;
            if (this.count1 <= 0) {
              clearInterval(this.timer1);
              this.codeStatus1 = false;
              this.timer1 = null;
            }
          }, 1000);
          getVerificationCode({
            phone,
            terminal_type: "PC",
            codeType: "2",
          });
        }
      } else if (type === 2) {
        let phone = this.registerForm.phonenumber;
        if (!phone || !RegPhone.test(phone)) {
          this.$message.error("手机号格式不正确");
          return false;
        }
        if (!this.timer2) {
          this.count2 = TIME_COUNT;
          this.codeStatus2 = true;
          this.timer2 = setInterval(() => {
            this.count2--;
            if (this.count2 <= 0) {
              clearInterval(this.timer2);
              this.codeStatus2 = false;
              this.timer2 = null;
            }
          }, 1000);
          getVerificationCode({
            phone,
            terminal_type: "PC",
            codeType: "1",
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#userLayout {
  height: 100%;
  .container {
    width: 100%;
    min-height: 100%;
    background: #fff url(../assets/bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    .title {
      font-size: 2.5vw;
      color: #fff;
      line-height: 1;
      padding-top: 3.5%;
      margin: 0 0 3.5% 8.4%;
      // padding: 3.5% 0 3.5% 8.4%;
      width: 35%;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 4.75rem;
        height: 4.75rem;
        margin-right: 2.25rem;
      }
    }
    .main {
      width: 63.6vw;
      min-width: 750px;
      height: 65vh;
      margin: 0 auto;
      border-radius: 12px;
      background: #fff;
      position: relative;
      box-shadow: 0px 0px 5px 2px #7195d7;
      .form_box {
        display: flex;
        margin: 0 8%;
        .form_left {
          flex: 1;
          overflow: hidden;
          img {
            width: 80%;
            float: left;
            margin-top: 28.8%;
          }
        }
        .form_right {
          flex: 1;
          .login_text {
            margin: 17% 0 10%;
            font-size: 2.25rem;
            color: #1165e2;
            span {
              font-size: 1.5625rem;
            }
          }
          .to_register {
            cursor: pointer;
            text-align: right;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            color: #4389f2;
          }
          .register_text {
            margin: 10% 0 6%;
            font-size: 2.25rem;
            color: #1165e2;
          }
          .to_login {
            cursor: pointer;
            text-align: right;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            color: #4389f2;
          }
          .login {
            /deep/ .ant-input {
              height: 7vh;
              border-radius: 3.5vh;
            }
            /deep/ .ant-btn {
              height: 7vh;
              border-radius: 3.5vh;
              margin-top: 3vh;
            }
            /deep/ .ant-input-prefix {
              color: rgba(0, 0, 0, 0.25);
            }
            /deep/ .has-error .ant-form-explain {
              padding-left: 20px;
              padding-top: 3px;
            }
            .code_input {
              /deep/.ant-input {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
              }
            }
            .get_code {
              &.ant-btn {
                width: 10vw;
                height: 7vh;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                margin-top: 0;
              }
            }
          }
          .register {
            /deep/ .ant-input {
              height: 7vh;
              border-radius: 3.5vh;
            }
            /deep/ .ant-btn {
              height: 7vh;
              border-radius: 3.5vh;
              // margin-top: 1vh;
            }
            /deep/ .ant-input-prefix {
              color: rgba(0, 0, 0, 0.25);
            }
            /deep/ .has-error .ant-form-explain {
              padding-left: 20px;
              padding-top: 3px;
            }
            .code_input {
              /deep/.ant-input {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
              }
            }
            .get_code {
              &.ant-btn {
                width: 10vw;
                height: 7vh;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                margin-top: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
